<template>
  <div class="layout-index">
    <!-------- 顶部轮播图 -------->
    <van-swipe :autoplay="2000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" width="100%" height="212px" />
      </van-swipe-item>
    </van-swipe>
    <!-------- /顶部轮播图 ------->
    <!--------- 顶部搜索框 ------->
    <van-search v-model="value" placeholder="请输入小区或地址" class="search">
      <template #label>
        <div @click="$router.push('/home/citylist')">
          {{ curentCity }}<span class="iconfont icon-arrow"></span>
        </div>
      </template>
    </van-search>
    <!-- 顶部搜索框右边图标 -->
    <div @click="onMap" class="mapSearch iconfont icon-map"></div>
    <!------ /顶部搜索框 --------->
    <!------ 标签选择栏 ---------->
    <van-grid :column-num="4" clickable>
      <van-grid-item class="gridSelectItem" @click="wToSeekHouse">
        <van-image
          :src="require('@/assets/imgs/whole-rent.png')"
          width="60px"
          height="60px"
        />
        <p class="text">整租</p>
      </van-grid-item>
      <van-grid-item class="gridSelectItem" @click="jToSeekHouse">
        <van-image
          :src="require('@/assets/imgs/join-rent.png')"
          width="60px"
          height="60px"
        />
        <p class="text">合租</p>
      </van-grid-item>
      <van-grid-item class="gridSelectItem" @click="onMap">
        <van-image
          :src="require('@/assets/imgs/map-find-house.png')"
          width="60px"
          height="60px"
        />
        <p class="text">地图找房</p>
      </van-grid-item>
      <van-grid-item class="gridSelectItem" @click="toRent">
        <van-image
          :src="require('@/assets/imgs/to-rent.png')"
          width="60px"
          height="60px"
        />
        <p class="text">去出租</p>
      </van-grid-item>
    </van-grid>
    <!------- /标签选择栏 --------->
    <!------- 租房小组&更多 ------->
    <van-cell value="更多" class="more">
      <template #title>
        <span class="text-left">租房小组 </span>
      </template>
    </van-cell>
    <van-grid
      :column-num="2"
      :clickable="true"
      direction="horizontal"
      :gutter="10"
    >
      <van-grid-item
        icon="photo-o"
        class="rent-item"
        v-for="item in rentItem"
        :key="item.id"
      >
        <van-image
          :src="`http://liufusong.top:8080${item.imgSrc}`"
          width="50px"
          height="50px"
        />
        <div class="text1">
          <p>{{ item.title }}</p>
          <p>{{ item.desc }}</p>
        </div>
      </van-grid-item>
    </van-grid>
    <!-------- /租房小组&更多 ------->
  </div>
</template>

<script>
import { getCarouselChartApi, rentTeamApi, queryHouseApi } from '@/api'
import Vue from 'vue'
import { Lazyload } from 'vant'
import { mapState, mapMutations, mapGetters } from 'vuex'

Vue.use(Lazyload)
export default {
  name: 'Home',
  components: {},
  props: {},
  data() {
    return {
      images: [],
      value: '',
      rentItem: [],
      wholeRentType: [],
      joinRentType: []
    }
  },
  computed: {
    ...mapGetters(['isLogin']), //isLogin时为登录状态，!isLogin为未登录状态
    ...mapState(['queryParams']),
    // 引入vuex中的当前城市变量，并在页面使用
    curentCity() {
      return this.$store.state.curentCity
    }
  },
  watch: {},
  created() {
    this.getCarouselChartFn()
    this.rentTeamFn()
  },
  methods: {
    ...mapMutations(['getQueryParams']),
    // 获取轮播图图片
    async getCarouselChartFn() {
      const { data } = await getCarouselChartApi()
      // console.log(data.body)
      data.body.forEach((item) => {
        // console.log(item.imgSrc)
        this.images.push(`http://liufusong.top:8080${item.imgSrc}`)
      })
      // console.log(this.images)
    },
    // 获取租房小组数据
    onSearch() {},
    async rentTeamFn() {
      const { data } = await rentTeamApi()
      // console.log(data.body)
      this.rentItem = data.body
    },
    onMap() {
      this.$router.push('/map')
    },
    // 整租跳转
    wToSeekHouse() {
      this.WholeOrJoin(true)
    },
    // 合租跳转
    jToSeekHouse() {
      this.WholeOrJoin(false)
    },
    // 根据是整租还是合租根据情况传值跳转
    async WholeOrJoin(type) {
      // type ? console.log('整租房源') : console.log('合租房源')
      try {
        const obj = this.queryParams
        obj.rentType = type
        // 1、更新本地和vuex中复合请求条件
        this.getQueryParams(obj)
        //2、发请求
        this.$toast.loading({
          message: '加载中...',
          forbidClick: true
        })
        const { data } = await queryHouseApi(obj)
        // console.log(data)
        this.wholeRentType = data.body.list
        this.$router.push({
          path: '/home/wholerent',
          query: {
            wholeRent: this.wholeRentType,
            nextType: type
          }
        })
      } catch (err) {
        this.$toast.fail('加载失败，请重试')
      }
    },
    toRent() {
      if (this.isLogin) {
        this.$router.push('/rent').catch((err) => {
          return err
        })
      } else {
        this.$router.push('/login')
      }
    }
  }
}
</script>

<style scoped lang="less">
.layout-index {
  background-color: #f6f5f6;
  padding-bottom: 20px;
  // height: calc(100vh - 95px);
  position: relative;
  .search {
    position: absolute;
    top: 50px;
    left: 40px;
    width: 620px;
    padding: 0 1px;
    z-index: 2;
    height: 68px;
    margin-right: 0;
  }
  .gridSelectItem {
    padding: 0 !important;
  }
  :deep(.van-search__action) {
    padding: 0;
  }
  .mapSearch {
    position: absolute;
    top: 60px;
    right: 20px;
    color: #fff;
    font-size: 50px;
  }
  .text {
    font-size: 14px;
    margin-top: 22px;
  }
  :deep(.van-grid-item) {
    width: 180px;
    height: 260px;
    padding: 20px 0;
  }
  .more {
    background-color: #f6f5f6;
    font-size: 28px;
    padding: 10px 20px 10px 30px;
    .text-left {
      font-size: 30px;
      font-weight: 700;
    }
  }
  .rent-item {
    height: 130px;
    padding: 0;
  }
  .text1 {
    font-size: 20px;
    margin: 20px;
  }
}
</style>
